.#{$ns}DateRangePicker {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    border: $DatePicker-borderWidth solid $DatePicker-borderColor;
    font-size: $DatePicker-fontSize;
    padding: $DatePicker-paddingY $DatePicker-paddingX;
    height: $DatePicker-height;
    outline: none;
    white-space: nowrap;
    border-radius: $DatePicker-borderRadius;

    color: $DatePicker-color;
    background-color: $DatePicker-bg;

    &:not(.is-disabled) {
        cursor: pointer;

        &:hover {
            background-color: $DatePicker-onHover-bg;
        }
    }

    &.is-focused {
        border-color: $DatePicker-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;
    }

    &.is-disabled {
        background: $gray200;

        > &-input {
            color: $text--muted-color;
        }
    }

    &-placeholder {
        color: $DatePicker-placeholderColor;
        user-select: none;
        margin-right: $gap-base;
        flex-basis: 0;
        flex-grow: 1;
    }

    &-value {
        margin-right: $gap-base;
        flex-basis: 0;
        flex-grow: 1;
    }

    &-toggler {
        cursor: pointer;
        color: $DatePicker-iconColor;

        &:hover {
            color: $DatePicker-onHover-iconColor;
        }
    }

    &-clear {
        @include input-clear();
        display: inline-block;
        line-height: 1;
        margin-right: $gap-xs;
    }
}

.#{$ns}DateRangePicker-wrap {
    width: auto;
    white-space: nowrap;
    padding: $gap-md;
}

.#{$ns}DateRangePicker-start,
.#{$ns}DateRangePicker-end {
    display: inline-block;

    .rdtPicker {
        padding: 0;
        box-shadow: none;
        border: none;
    }
}

.#{$ns}DateRangePicker-end {
    margin-left: 20px;
}

.#{$ns}DateRangePicker-rangers {
    margin: 0 0 $gap-sm;
    padding: 0;
    list-style: none;
}

.#{$ns}DateRangePicker-ranger {
    display: inline-block;
    margin-right: $gap-sm;

    a {
        cursor: pointer;
    }
}

.#{$ns}DateRangePicker-actions {
    text-align: right;
    margin-top: $gap-sm;
}

.#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker {
    display: flex;
}
